<template>
  <div class="questions-choice-box">
    <el-card class="box-card">
      <div class="tit">
        <span class="prompt-font">说明: 目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- 筛选框 -->
      <el-form
        :model="filterData"
        class="filterForm"
        label-width="80px"
        ref="filterForm"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                clearable
                @clear="(tagList = []), (catalogList = [])"
                @change="onSubjectChange"
                size="small"
                v-model="filterData.subjectID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in subjectList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="questionType">
              <el-select
                size="small"
                v-model="filterData.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in catalogList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                size="small"
                v-model="filterData.tags"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in tagList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                size="small"
                v-model="filterData.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                size="small"
                v-model="filterData.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in questionType"
                  :key="i"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                size="small"
                v-model="filterData.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in difficulty"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                size="small"
                v-model="filterData.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in direction"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                size="small"
                v-model="filterData.creatorID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in creatorList"
                  :key="i"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input size="small" v-model="filterData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input size="small" v-model="filterData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" class="citys-from-item">
              <el-select
                @change="citysDate = citys($event)"
                size="small"
                v-model="filterData.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in provinces"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                size="small"
                v-model="filterData.province"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in citysDate"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="last-col-btns">
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="onSearch"
              >搜素</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- /筛选框 -->
      <!-- tab切换页 -->
      <el-tabs type="card" v-model="chkState">
        <el-tab-pane label="全部" name="-1">
          <table-item
            :tableData="tableData"
            :total="total"
            @previewQuestion="previewQuestion"
            @auditQuestion="auditQuestion"
            @uploadTable="onSearch"
          />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="0">
          <table-item
            :tableData="tableData"
            :total="total"
            @previewQuestion="previewQuestion"
            @auditQuestion="auditQuestion"
            @uploadTable="onSearch"
          />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="1">
          <table-item
            :tableData="tableData"
            :total="total"
            @previewQuestion="previewQuestion"
            @auditQuestion="auditQuestion"
            @uploadTable="onSearch"
          />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2">
          <table-item
            :tableData="tableData"
            :total="total"
            @previewQuestion="previewQuestion"
            @auditQuestion="auditQuestion"
            @uploadTable="onSearch"
          />
        </el-tab-pane>
      </el-tabs>
      <!-- /tab 切换页 -->
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="filterData.pagesize"
        :current-page="filterData.page"
        @current-change="onCurrentPageChange"
        @size-change="onPageSizeChange"
        :page-sizes="[5, 10, 20, 50]"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        class="pagination-box"
      >
      </el-pagination>
      <!-- /分页 -->
    </el-card>
    <!-- 审核的弹出框 -->
    <audit-dialog ref="audit" />
    <!-- /审核的弹出框 -->
    <!-- 预览的弹出框 -->
    <preview-dialog ref="preview" />
    <!-- /预览的弹出框 -->
  </div>
</template>

<script>
// 引入的组件
import tableItem from "../components/du-questions-choice-table";
import auditDialog from "../components/du-questions-choice-auditDialog";
import previewDialog from "../components/du-questions-choice-previewDialog"
// 引入的方法
import { simple } from "@/api/hmmm/subjects.js";
import { simple as directory_simple } from "@/api/hmmm/directorys.js";
import { simple as tag_simple } from "@/api/hmmm/tags.js";
import { simple as users_simple } from "@/api/base/users.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { choice } from "@/api/hmmm/questions.js";
// 引入的数据
import {
  status,
  difficulty,
  questionType,
  direction,
  chkType,
  publishType,
} from "@/api/hmmm/constants.js";

export default {
  data() {
    return {
      // 分页
      total: 0,
      // 表格部分的数据
      tableData: {},
      // 所有城市
      provinces: provinces(),
      citysDate: [],
      // 获取城市下的地区, 需要传入值
      citys,
      // 状态
      status,
      // 难度
      difficulty,
      // 题型
      questionType,
      // 方向
      direction,
      // 精品审核
      chkType,
      // 发布状态
      publishType,
      // 录入人列表
      creatorList: [],
      // 标签列表
      tagList: [],
      // 二级目录列表
      catalogList: [],
      // 学科列表
      subjectList: [],
      tableData: [
        {
          number: 0,
          subject: 0,
          catalog: 0,
          questionType: 0,
          question: 0,
          addDate: 0,
          difficulty: 0,
          creator: 0,
          chkState: 0,
          chkRemarks: 0,
          chkUser: 0,
          publishState: 0,
        },
        {
          number: 0,
          subject: 0,
          catalog: 0,
          questionType: 0,
          question: 0,
          addDate: 0,
          difficulty: 0,
          creator: 0,
          chkState: 0,
          chkRemarks: 0,
          chkUser: 0,
          publishState: 0,
        },
      ],
      // 在刚进入页面时发起请求获取全部数据不能有page和pagesize之外字段
      // 其他 filterData 中的数据如果初始化要用只能定义在外面
      // 将其他字段去掉或者将其他字段设置为 null
      chkState: "-1", // 审核状态 0 待审核 1 通过 2 拒绝
      filterData: {
        pagesize: 5, // 每页的页数
        page: 1, // 分页的当前页数
        // subjectID: "", // 学科id
        // catalogID: "", // 目录id
        // tags: "", // 标签名称
        // keyword: "", //关键字
        // questionType: "", //试题类型
        // difficulty: "", // 难度
        // direction: "", //方向
        // creatorID: "", //录入人id
        // remarks: "", // 题目备注
        // shortName: "", //企业简称
        // city: "", //企业所在城市
        // province: "", // 企业所在地省份
      },
    };
  },
  components: { tableItem, auditDialog, previewDialog },
  created() {
    // 获取表格数据
    this.onSearch();
    // 获取学科列表
    this.getSubjects();
    // 获取录入人
    this.getUser();
  },
  // 通过 watch 监听
  // 因为tabs组件本身并没有监听绑定数据的变化的方法
  watch: {
    chkState: {
      handler(newVal) {
        if (newVal !== "-1") {
          this.filterData.chkState = newVal;
        } else {
          this.filterData.chkState = null;
        }
        this.onSearch();
      },
    },
  },
  methods: {
    // 控制预览的弹出框
    previewQuestion(id) {
      this.$refs.preview.openPreviewDialog(id);
    },
    // 控制审核的弹出框
    auditQuestion(id) {
      this.$refs.audit.openAuditDialog(id);
    },
    // 每页条数改变
    onPageSizeChange(size) {
      this.filterData.pagesize = size;
      this.onSearch();
    },
    // 当前页改变
    onCurrentPageChange(current) {
      this.filterData.page = current;
      this.onSearch();
    },
    // 提交表单数据获取表格数据
    async onSearch() {
      try {
        const { data: res } = await choice(this.filterData);
        this.tableData = res.items;
        this.total = res.counts;
        if (this.tableData.length === 0) {
          this.filterData.page--;
        }
      } catch (err) {
        console.log(err);
        this.$message.error("获取表格数据失败,请稍后再试");
      }
    },
    // 重置表单
    resetForm() {
      this.tagList = [];
      this.catalogList = [];
      this.filterData.city = "";
      this.filterData.province = "";
      this.$refs.filterForm.resetFields();
    },
    // 学科改变时触发
    async onSubjectChange(val) {
      const data = {
        subjectID: val,
      };
      try {
        // 获取目录的请求
        const { data: res } = await directory_simple(data);
        this.catalogList = res;
      } catch (err) {
        console.log(err);
        this.$message.error("获取目录失败");
      }
      try {
        // 获取标签的请求
        const { data: res } = await tag_simple(data);
        this.tagList = res;
      } catch (err) {
        console.log(err);
        this.$message.error("获取标签失败");
      }
    },
    // 获取录入人
    async getUser() {
      try {
        const { data: res } = await users_simple();
        this.creatorList = res;
      } catch (err) {
        this.$message.error("获取录入人失败");
        console.log(err);
      }
    },
    // 获取学科
    async getSubjects() {
      try {
        const { data: res } = await simple();
        this.subjectList = res;
      } catch (err) {
        this.$message.error("获取学科失败");
        console.log(err);
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.questions-choice-box {
  margin: 10px 0;
  padding: 0 10px;
  .tit {
    display: flex;

    justify-content: space-between;
    .prompt-font {
      font-size: 12px;
      color: pink;
    }
  }
  .filterForm {
    margin-top: 18px;
    .el-form-item {
      margin-bottom: 16px;
    }
    ::v-deep .citys-from-item {
      .el-form-item__content {
        display: flex;
        .el-select:nth-child(1) {
          margin-right: 5px;
        }
      }
    }
    .last-col-btns {
      display: flex;
      justify-content: flex-end;
    }
  }
  // tab 页内容区域的盒子
  .el-tabs__content {
    margin-bottom: 20px;
  }
  // 分页的盒子
  .pagination-box {
    text-align: right;
    // 前往第几页的盒子
    .el-pagination__jump {
      margin-left: 0;
    }
  }
}
</style>
